<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>NeverGetMe</title>
    <link rel="shortcut" th:href="@{/icon/java.svg}"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
</head>
<body>
<div th:replace="header::html"></div>
<div class="container-fluid mb-3 mt-3">
    <div class="row">
        <div class="col-2">
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">用户管理</a>
                <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">博客管理</a>
                <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">统计数据</a>
                <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
            </div>
        </div>
        <div class="col-10">
            <div class="tab-content" id="v-pills-tabContent">
                <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                    <table class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th scope="col">id</th>
                            <th scope="col">uuid</th>
                            <th scope="col">username</th>
                            <th scope="col">email</th>
                            <th scope="col">telephone</th>
                            <th scope="col">role</th>
                        </tr>
                        </thead>
                        <tbody id="userTableShow">
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                    <table class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th scope="col">id</th>
                            <th scope="col">author</th>
                            <th scope="col">title</th>
                            <th scope="col">publishDate</th>
                            <th scope="col">likes</th>
                            <th scope="col">visitTimes</th>
                            <th scope="col">isOriginal</th>
                            <th scope="col">isStick</th>
                            <th scope="col">tags</th>
                        </tr>
                        </thead>
                        <tbody id="articleTableShow">
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                    <div id="statisticalData" style="width: auto;height:400px;"></div>
                    <div id="TagsArticleCountStatistics" style="width: auto;height:400px;"></div>
                    <div id="PageViewCount" style="width: auto;height:400px;"></div>
                </div>
                <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="AdminSetModal" tabindex="-1" role="dialog" aria-labelledby="AdminSetModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="AdminSetModalTitle"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="AdminSetModalInput">输入新值</label>
                        <input type="number" class="form-control" id="AdminSetModalInput">
                        <div class="invalid-feedback">
                            请输入正确的值
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="AdminSetModalInputEnter">Save changes</button>
            </div>
        </div>
    </div>
</div>
<div th:replace="footer::html"></div>
<script th:src="@{/myjs/header.js}"></script>
<script th:src="@{/myjs/addsvg.js}"></script>
<script th:src="@{/myjs/loadCharts.js}"></script>

<script>
    readUserInfo();
    var myChart = echarts.init(document.getElementById('statisticalData'));
    var tagsArticleCountStatisticsChart=echarts.init(document.getElementById("TagsArticleCountStatistics"));
    var pageViewCount=echarts.init(document.getElementById("PageViewCount"));
</script>
<script>
    var method_id,method_item;
    function itemClickMethod(id,item) {
        method_id=id;
        method_item=item;
        $("#AdminSetModalTitle").text(id+item);
        $("#AdminSetModal").modal('show');
    }
    function updateUserList(){
        $("#userTableShow").empty();
        $.post("/admin/getUserList",{},function (data,statue) {
            if(data){
                var appendHtml='';
                for(var i in data){
                    var user=data[i];
                    appendHtml=appendHtml+'<tr>\n' +
                        '<th scope="row">'+user.id+'</th>' +
                        '<td>'+user.user_uuid+'</td>' +
                        '<td>'+user.username+'</td>' +
                        '<td>'+user.email+'</td><td>'+user.telephone+'</td><td><button type="button" class="btn btn-link" onclick="itemClickMethod('+user.id+',\'role\')">'+user.role+'</button></td></tr>';
                }
                $("#userTableShow").append(appendHtml);
            }
        });
    }
    function updateArticleList(){
        $("#articleTableShow").empty();
        $.post("/admin/getArticleList",{},function (data,statue) {
            if(data){
                var appendHtml='';
                for(var i in data){
                    var article=data[i];
                    var tags='';
                    for(var j in article.tagsList){
                        var tag=article.tagsList[j];
                        tags+=tag.value+' ';
                    }
                    appendHtml+='<tr><th scope="row">'+article.id+'</th><td>' +article.author.username+
                        '</td><td>' +modifyTitleAndIdToATag(article.title,article.id)+
                        '</td><td>' +article.publishDate+
                        '</td><td>' +article.likes+
                        '</td><td>' +article.visitTimes+
                        '</td><td>' +article.isOriginal+
                        '</td><td><button type="button" class="btn btn-link" onclick="itemClickMethod('+article.id+',\'isStick\')">' +article.isStick+'</button>'+
                        '</td><td>' +tags+
                        '</td></tr>';
                }
                $("#articleTableShow").append(appendHtml);
            }
        });
    }
    $(document).ready(function () {
        updateUserList();
        updateArticleList();
        loadAllCharts({'PublishDate':myChart,'TagsArticleCount':tagsArticleCountStatisticsChart,'PageViewCount':pageViewCount});
        //loadAllCharts([myChart,tagsArticleCountStatisticsChart]);
       $("#AdminSetModalInputEnter").click(function () {
           if(method_item){
               if(method_item=="role"){
                    if(method_id&&$("#AdminSetModalInput").val()){
                        $.post("/admin/updateUserRoleById",{
                            userID:method_id,
                            role:$("#AdminSetModalInput").val()
                        },function (data,status) {
                            if(data){
                                $("#AdminSetModal").modal('hide');
                                updateUserList();
                            }
                        });
                    }
               }else if(method_item=="isStick"){
                    if(method_id&&$("#AdminSetModalInput").val()){
                        $.post("/admin/updateArticleIsStick",{
                            articleID:method_id,
                            isStick:$("#AdminSetModalInput").val()
                        },function (data,status) {
                            console.log(status)
                            if(status=="success"){
                                $("#AdminSetModal").modal('hide');
                                updateArticleList();
                            }
                        });
                    }
               }
           }
       })
    });
</script>
</body>
</html>